<template>
	<view class="play-container" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
		<view class="top-info">
			<!--  #ifdef  APP-PLUS || H5 -->
			<myuni-topbar>
				<template #left>
					<text class="iconfont icon-xia icon" @click="leftTap"></text>
				</template>
				<template #title>
					<navigator class="song-name-box" :url="`/pages/singer/singer?singerId=${currntSong.singerId}`">
						<text>{{currntSong.name}}</text><text>{{currntSong.singer}}</text>
					</navigator>
				</template>
				<template #right-icon>
					<view class="right-info">
						<!-- <image src="../../static/logo.png" :lazy-load="true" mode=""></image>
						<uni-icons type="redo" size="20" color="#535355"></uni-icons> -->
					</view>
				</template>
			</myuni-topbar>
			<!--  #endif -->
			<!--  #ifdef  MP-WEIXIN -->
			<myuni-topbar>
				<template #left>
					<text class="iconfont icon-xia icon" @click="leftTap"></text>
				</template>
				<template #title>
					<view class="song-name-box">
						<text>{{currntSong.name}}-{{currntSong.singer}}</text>
					</view>
				</template>
				<template #right-icon>
					<view class="right-info">
						<image src="../../static/logo.png" :lazy-load="true" mode="widthFix"></image>
					</view>
				</template>
			</myuni-topbar>
			<!--  #endif -->
		</view>
		<myuni-lyric v-if="showLyric" @hidden="openLyric" :lyric="lyric"></myuni-lyric>
		<view v-else class="disc-box" @click="openLyric">
			<image :class="playing?'tag':'rotate-stop tag'" src="../../static/player_bar.png" :lazy-load="true" mode="widthFix"></image>
			<view class="cover">
				<image :src="currntSong.picUrl" :lazy-load="true" mode="widthFix"></image>
			</view>
		</view>
		<view class="control-container" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
			<view class="first-row-control">
				<text class="control-item collection iconfont icon-jushoucang"></text>
				<text class="control-item download iconfont icon-xiazai"></text>
				<text class="control-item comment iconfont icon-review"></text>
				<text class="control-item other iconfont icon-paixu"></text>
			</view>
			<view class="second-row-control">
				<text class="start-time">{{startTime}}</text>
				<myuni-line class="myline" ref="line" @emitClick="changeProgress" :width="currentWidth"></myuni-line>
				<text class="end-time">{{endTime}}</text>
			</view>
			<view class="thrid-row-control">
				<text class="control-item playway iconfont" :class="single?'icon-24gl-repeatOnce2':'icon-24gl-repeat2'" @click="emitChangePlayWay"></text>
				<view class="play-control-box">
					<text class="control-item pre iconfont icon-shangyishoushangyige"  @click="emitPre"></text>
					<text class="control-item play iconfont" :class="playing?'icon-weibiaoti--':'icon-bofang1'" @click="emitPlay"></text>
					<text class="control-item next iconfont icon-xiayigexiayishou" @click="emitNext"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		props:['currntSong','playing'],
		data() {
			return {
				timer:null,
				currentTime:0,
				duration:1,
				lineWidth:0,
				single:true,
				showLyric:false,
				lyric:null
			}
		},
		created() {
			this.single=this.$Audio.loop
			this.timer=setInterval(()=>{
				if(this.currentTime>=this.duration){
					console.log(1)
					return clearInterval(this.timer)
				}
				    this.currentTime = this.$Audio.currentTime
				    this.duration = this.$Audio.duration
			},1000)
		},
		mounted() {
			// #ifdef H5
			  this.lineWidth = this.$refs.line.$el.clientWidth
			// #endif
		},
		computed:{
			...mapState(['themeType']),
			startTime(){
				return this.secondToMinutes(this.currentTime)
			},
			endTime(){
				return this.secondToMinutes(this.duration)
			},
			currentWidth(){
				return (this.currentTime/this.duration*100).toFixed(2)+'%'
			}
		},
		methods: {
			secondToMinutes(second){
				let secondTime = parseInt(second)//将传入的秒的值转化为Number
			    let min = 0// 初始化分
			    let h =0// 初始化小时
			    let result=''
			    if(secondTime>60){//如果秒数大于60，将秒数转换成整数
			      min=parseInt(secondTime/60)//获取分钟，除以60取整数，得到整数分钟
			      secondTime=parseInt(secondTime%60)//获取秒数，秒数取佘，得到整数秒数
			    }
			   result=`${min.toString().padStart(2,'0')}:${secondTime.toString().padStart(2,'0')}`
			    return result 
			},
			leftTap(){
				console.log(2)
				this.$emit("leftTap")
			},
			emitPlay(){
				this.$emit("emitPlay")
			},
			emitPre(){
				this.$emit("emitPre",false)
			},
			emitNext(){
				this.$emit("emitNext",true)
			},
			emitChangePlayWay(){
				this.$Audio.loop=!this.single
				this.single=this.$Audio.loop
				if(!this.single){
					this.$Audio.onEnded((res)=>{
					  this.emitNext()
					})
				}
			},
			changeProgress(e){
				// #ifdef H5
				let currentwidth=(e.detail.x-e.target.offsetLeft)<0?0:e.detail.x-e.target.offsetLeft
				let currentPercent = (currentwidth/this.lineWidth*100).toFixed(2)+'%'
				let currentTime=currentwidth/this.lineWidth*this.duration
				this.$Audio.currentTime=currentTime
				console.log(currentTime)
				// #endif
			},
			openLyric(){
				this.request({
					url:"/lyric?id="+this.currntSong.id
				}).then(res=>{
					this.lyric=res.lrc.lyric
					this.showLyric=!this.showLyric
				})
			}
		},
		destroyed() {
			clearInterval(this.timer)
		}
	}
</script>
<style lang="scss" scoped>
.play-container{
	position: relative;
	/*  #ifdef  APP-PLUS*/
	    box-sizing: border-box;
	   margin-top: -56rpx;
	/*  #endif  */
	width: 100vw;
	height: 100vh;
	::v-deep.myuni-topbar{
		background-color: unset;
	}
	.top-info{
		height: 100rpx
		::v-deep.left-icon{
			line-height: 100rpx;
		}
		::v-deep.myuni-topbar{
			line-height: 50rpx;
		}
		::v-deep.right-icon{
		  width: 160rpx;
		}
		.song-name-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: unset !important;
		}
		.right-info{
			height: 100%;
			image{
				box-sizing: border-box;
				padding: 20rpx;
				width: 100rpx;
				height: 100rpx !important;
				vertical-align: middle;
			}
			.uni-icons{
				margin-left: 5px;
			}
		}
	}
	.disc-box{
		position: relative;
		margin: 200rpx auto;
		/*  #ifdef MP-WEIXIN */
		margin: 50px auto;
		/*  #endif  */
		width: 410rpx;
		height: 420rpx;
		background:url(https://s.pc.qq.com/tousu/img/20211025/6404504_1635151543.jpg) no-repeat;
		background-size: 100%;
		.tag{
			position: absolute;
			left: 150rpx;
			top: -178rpx;
			/*  #ifdef  APP-PLUS*/
			top: -122rpx;
			/*  #endif  */
			transition: all .3s ease-in;
			transform-origin: left top;
			width: 200rpx;
			transform: rotate(4deg);
			/*  #ifdef  APP-PLUS*/
			transform: rotate(-6deg);
			/*  #endif  */
		}
		.cover{
			position: absolute;
			left: 50%;
			top: 50%;
			width: 240rpx;
			height: 240rpx;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			overflow: hidden;
			image{
              width: 100%;
			}
		}
	}
	.rotate-stop{
		transform: rotate(-45deg) !important;
	}
	.control-container{
		box-sizing: border-box;
		padding: 20rpx;
		height: 400rpx;
		// background-color: red;
		.first-row-control{
			display: flex;
			justify-content: space-around;
			.control-item{
				flex: 1;
				text-align: center;
				font-size: 40rpx;
			}
		}
		.second-row-control{
			margin:80rpx 0;
			display: flex;
			align-items: center;
			.myline{
				flex: 1;
			}
			.start-time,
			.end-time{
				width: 176rpx;
				text-align: center;
			}
		}
		.thrid-row-control{
			display: flex;
			align-items: center;
			.control-item{
				text-align: center;
				font-size: 40rpx;
			}
			.playway{
				width: 176rpx;
			}
			.play-control-box{
				flex: 1;
				padding-left: 60rpx;
				align-items: center;
				// text-align: center;
				.play{
					margin: 0 40rpx;
					font-size: 80rpx;
				}
			}
		}
	}
}
</style>
